<template>
    <div class="edit-own-profile">
      <!--上传头像-->
      <section-title :title="uploadAvatar"></section-title>
      <!--头像-->
      <div class="upload-avatar clearfix">
        <a class="avatar">
          <img src="" alt="" onerror="javascript:this.src='./static/images/avatar/icon-avatar.png';">
        </a>
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!--标题-->
      <section-title :title="title"></section-title>
      <!--表单-->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="ruleForm.sex"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="手机号码"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="QQ" prop="tencentQq">
          <el-input v-model="ruleForm.tencentQQ"></el-input>
        </el-form-item>
        <el-form-item label="现居地" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="您是？" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择您的职业">
            <el-option label="杞农" name="type" value="0"></el-option>
            <el-option label="经销商" name="type" value="1"></el-option>
            <el-option label="生产厂商" name="type" value="2"></el-option>
            <el-option label="枸杞从业者" name="type" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="您是？" prop="">
          <el-select v-model="ruleForm.type" placeholder="请选择您的职业">
            <el-option label="农民" name="type" value="0"></el-option>
            <el-option label="采购商" name="type" value="1"></el-option>
            <el-option label="生产商" name="type" value="2"></el-option>
            <el-option label="枸杞从业者" name="type" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">修改个人信息</el-button>
          <!--<el-button @click="resetForm('ruleForm')">重置信息</el-button>-->
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
import {getCurrentStringTime} from '../../utils/dateUtils'
import {getUserId} from '../../libs/util'
import SectionTitle from '../../components/title/SectionTitle'
import {getUserDetails, modifyUserInfo} from '../../api/user'
import Cookies from 'js-cookie'
export default {
  name: 'EditPersonalProfile',
  components: {SectionTitle},
  data () {
    return {
      title: {
        line: true,
        icon: '',
        name: '基本资料',
        editable: true
      },
      uploadAvatar: {
        line: true,
        icon: '',
        name: '上传头像',
        editable: true,
        operate: {
          edit: false
        }
      },
      ruleForm: {
        nickname: '',
        name: '',
        age: '',
        phone: '',
        sex: '',
        address: '',
        desc: '',
        WeChat: '',
        tencentQQ: '',
        email: '',
        userId: getUserId(),
        imageDesc: '',
        createTime: getCurrentStringTime()
      },
      rules: {
        nickname: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择发布信息类型', trigger: 'change' }
        ],
        phone: [
          { required: true, message: '请填写联系电话', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请填写联系地址', trigger: 'change' }
        ],
        descInfo: [
          { required: true, message: '请填写信息详情', trigger: 'blur' }
        ],
        imageDesc: [
          { required: true, message: '请添加图片详情', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init: async function () {
      let params = {
        userId: Cookies.get('userId')
      }
      const promise = await getUserDetails(params)
      console.log('用户信息：', promise)
      this.ruleForm.name = promise.result.resultJson.name
      this.ruleForm.nickname = promise.result.resultJson.nickName
      this.ruleForm.sex = promise.result.resultJson.sex
      this.ruleForm.age = promise.result.resultJson.age
      this.ruleForm.address = promise.result.resultJson.homeAddress
      this.ruleForm.phone = promise.result.resultJson.phone
      this.ruleForm.email = promise.result.resultJson.email
    },
    /**
     * 修改个人信息
     */
    submitForm: async function () {
      let params = {
        name: this.ruleForm.name,
        nickname: this.ruleForm.nickname,
        sex: this.ruleForm.sex,
        age: this.ruleForm.age,
        address: this.ruleForm.address,
        phone: this.ruleForm.phone,
        email: this.ruleForm.email,
        tencentQQ: this.ruleForm.tencentQQ,
        WeChat: this.ruleForm.WeChat,
        userId: Cookies.get('userId')
      }
      const promise = await modifyUserInfo(params)
      console.log('修改更新个人信息：', promise)
    }
  }
}
</script>

<style scoped>
.edit-own-profile{
  min-height: 700px;
  background-color: #FFF;
}
.avatar{
  float: left;
  display: block;
  width: 150px;
  height:150px;
  margin-left: 200px;
}
.avatar img{
  display: block;
  width: 100%;
  height: 100%;
}
  >>>.el-form{
    padding: 20px 0;
    margin: 0 auto;
  }
  >>>.el-form-item{
    width: calc(50% - 40px);
    float: left;
    padding: 0 20px;
  }
  .el-input,.el-textarea,.el-select{
    width: 300px;
  }
</style>
